<template>
  <div>
    <myheader></myheader>
    <van-form @submit="reg">
      <van-field
        v-model="from.username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="from.password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="from.mobile"
        name="mobile"
        label="手机号"
        placeholder="手机号"
        :rules="[{ required: true, message: '请输入手机号' }]"
      />
      <drag-verify
        :width="width"
        :height="height"
        :text="text"
        :circle="true"
        :success-text="successText"
        :background="background"
        :progress-bar-bg="progressBarBg"
        :completed-bg="completedBg"
        :handler-bg="handlerBg"
        :handler-icon="handlerIcon"
        :text-size="textSize"
        :success-icon="successIcon"
        ref="Verify"
      >
      </drag-verify>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" style="width: 200px">注册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import myheader from "./myheader"
import dragVerify from 'vue-drag-verify'

export default {
  name: "Reg",
  data(){
    return{
      from:{},
      handlerIcon: "fa fa-angle-double-right",
      successIcon: "fa fa-check",
      background: "#cccccc",
      progressBarBg: "#4b0",
      completedBg: "#66cc66",
      handlerBg: "#fff",
      text: "请将滑块拖动到右侧",
      successText: "验证成功",
      width: 320,
      height: 42,
      textSize: "18px"
    }
  },
  methods:{
    reg(){
      if(this.$refs.Verify.isPassing){
        this.$axios.post('/users/reg',this.from).then(res=>{
          if(res.data.code==200){
            alert('注册成功')
            this.from={}
          }else if(res.data.code==10010){
            alert('手机号格式错误')
          }
        })
      }else{
        alert('请验证后再进行登录')
      }
    }
  },
  components:{
    'myheader':myheader,
    'dragVerify':dragVerify,
  }
}


</script>

<style scoped>
>>>.dv_handler{height:42px !important}
</style>
